<template>
	<view>
		<image :src="imgBaseUrl + 'promotion-collection-header.png'" class="collection-header" />
		<view class="plr-24 pos-rel">
			<view class="flex-a mt-48" @click="navigateTo('/pages/promotion/shop-info')">
				<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
				<view class="ml-16">
					<view class="fs-32 font-bold flex-a c-white">
						<text>小乖吃喝玩乐记</text>
						<image :src="imgBaseUrl + 'arrow-right-white.png'" class="icon-28 ml-8" />
					</view>
					<view class="mt-4 c-white-_6">欢迎来到我们的旅行生活。</view>
				</view>
			</view>
			<view class="mt-54 ptb-20 plr-24 radius-16 bg-white space-between flex-a" @click="createCollection">
				<view class="flex-a">
					<image :src="imgBaseUrl + 'promotion-collection-add.png'" class="icon-64" />
					<text class="ml-16 fs-28">创建合集</text>
				</view>
				<image :src="imgBaseUrl + 'arrow-right.png'" class="icon-24" />
			</view>
			<view v-for="(item, index) in listData" :key="index" class="zjy-card-form mt-16">
				<view class="space-between flex-a">
					<view class="zjy-card-title text-ellipsis flex-1">恩施大峡谷超值特价恩施大峡谷超值特价</view>
					<view class="flex-a ml-28">
						<zjy-button size="mini">编辑</zjy-button>
						<view class="ml-20">
							<zjy-button type="line" size="mini">分享</zjy-button>
						</view>
					</view>
				</view>
				<view class="c-grey-86 mt-4">2024-12-13 12:12</view>
				<up-line color="#f3f3f3" margin="24rpx 0"></up-line>
				<view class="flex-a">
					<view v-if="index == 0" class="flex-1 flex-a overflow-hidden">
						<image
							class="icon-112 radius-16"
							src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
							mode="aspectFill"
						/>
						<text class="c-grey-4e ml-16 text-ellipsis">恩施大峡谷成人票</text>
					</view>
					<view v-else class="flex-1 collection-products">
						<view class="product-list">
							<view v-for="(item, index) in [1, 1, 1, 1, 1, 1]" :key="index" class="product-item">
								<image
									class="icon-112 radius-16"
									src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
									mode="aspectFill"
								/>
								<view class="text-ellipsis full-width text-center">恩施大峡谷成人票</view>
							</view>
						</view>
					</view>
					<view class="ml-40 flex-col text-center c-grey-86">
						<view>共6单</view>
						<view>商品</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share-shop" @click="shareShop">
			<image :src="imgBaseUrl + 'icon-share.png'" class="icon-32" />
			<text class="ml-4">分享店铺</text>
		</view>
		<up-popup
			:show="showCreatePopup"
			:safe-area-inset-bottom="true"
			mode="bottom"
			:round="16"
			@close="closeCreatePopup"
		>
			<view class="popup-bottom-container">
				<view class="pt-32 pb-48 plr-24 flex-a">
					<view class="fs-28" @click="closeCreatePopup">取消</view>
					<view class="fs-32 font-bold flex-1 text-center">新建合集</view>
					<view class="fs-28 c-brown-bc" @click="navigateTo('/pages/promotion/product/collection-create')">
						确认
					</view>
				</view>
				<view class="popup-content plr-18" style="min-height: auto">
					<up-textarea
						class="textarea"
						v-model="collectionName"
						placeholder="给你的合集取一个名称吧"
						:height="100"
						:maxlength="50"
					></up-textarea>
				</view>
			</view>
		</up-popup>
		<zjy-share v-model:value="showSharePopup" />
	</view>
</template>
<script setup lang="ts">
import { navigateTo } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const listData = ref(new Array(10).fill(1))

const showSharePopup = ref(false)
const shareShop = () => {
	showSharePopup.value = true
}

const collectionName = ref("")
const showCreatePopup = ref(false)
const createCollection = () => {
	showCreatePopup.value = true
}
const closeCreatePopup = () => {
	showCreatePopup.value = false
}
</script>
<style lang="scss" scoped>
.collection-header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 460rpx;
}

.collection-products {
	height: 154rpx;
	position: relative;
	overflow: hidden;
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 160rpx;
		background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	}
	.product-list {
		width: 100%;
		overflow: scroll;
		display: flex;
		.product-item {
			width: 112rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			color: $c-grey-4e;
			font-size: 24rpx;
			& + .product-item {
				margin-left: 24rpx;
			}
		}
	}
}
.share-shop {
	width: 256rpx;
	height: 88rpx;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	bottom: 108rpx;
	left: calc(50% - 128rpx);
	border-radius: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: 500;
	color: $c-white;
}
</style>
